<script setup lang="ts">
import { nextTick, ref, watch } from 'vue';
import type { Combinator } from '@webav/av-cliper';
const emit = defineEmits(['loadEnd']);

const props = defineProps<{
  com: Combinator;
  start: boolean;
}>();
const videoSrc = ref('');
watch(
  () => props.start,
  async (newVal: boolean) => {
    if (props.com === null || !newVal) return;
    console.log(props.com, 'props.com', newVal);
    const srcBlob = await new Response(props.com?.output()).blob();
    nextTick(() => {
      videoSrc.value = URL.createObjectURL(srcBlob);
      emit('loadEnd');
    });
  },
  {
    immediate: true
  }
);
</script>

<template>
  <div>
    <video
      v-if="start"
      class="absolute left-0 top-0 z-20 h-full w-full object-fill"
      :src="videoSrc"
      controls
      autoPlay
    ></video>
  </div>
</template>

<style scoped></style>
